

import React,{ useState } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import {Dropdown,Button, Avatar, Layout } from 'antd';
import { useNavigate, } from "react-router-dom";
const { Header} = Layout;


const headerStyle = {
  // textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 48,
  lineHeight: '64px',
  backgroundColor: '#ffffff',
  display: 'flex',
  justifyContent: "space-between",
};

const CommonHeader = (props) => {
  const {active,clickMenu} = props
  console.log(props,'CommonHeader--组件的props');
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const logout = () => {
    //清除token
    localStorage.removeItem("token");
    navigate("/login");
  };
  const items = [
    {
      label: (
        <a target="_blank" rel="noopener noreferrer" onClick={() => logout()}>
          {/* 点击事件一定要用箭头函数写成回调函数，不然一开始就会执行一次 logout
          回调函数是异步的，只有触发点击事件才会执行回调*/}
          退出
        </a>
      ),
      key: "0",
    },
    {
      label: (
        <a target="_blank" rel="noopener noreferrer" onClick={() => navigate("/user")}>
          个人中心
        </a>
      ),
      key: "1", 
    },
  ];
    return(
        <>
      
          <Header style={headerStyle}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
            <div className="logo" >
            <Dropdown
              menu={{
                items,
              }}
            >
              <a onClick={(e) => e.preventDefault()}>
              <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
              </a>
            </Dropdown>
            {/* <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" /> */}
            </div>
          </Header>
        
        </>
    )
}


export default CommonHeader